<template>
    <el-card shadow="never">
        <div slot="header">动态表单(cascader)</div>
        <DynamicForm :schema="schema" :formData="formData"></DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
const city = [
    {
        value: 'A', 
        label: '湖北',
        children: [
            {
                value: 'A-0', 
                label: '恩施',
                children: [
                    {value: 'A-0-1', label: '建施'},
                    {value: 'A-0-2', label: '巴东'},
                    {value: 'A-0-3', label: '宣恩'},
                    {value: 'A-0-4', label: '咸丰'},
                    {value: 'A-0-5', label: '来凤'},
                    {value: 'A-0-6', label: '鹤峰'},
                ]
            },
            {
                value: 'A-1', 
                label: '武汉',
                children: [
                    {value: 'A-1-1', label: '江岸区'},
                    {value: 'A-1-2', label: '江汉区'},
                    {value: 'A-1-3', label: '硚口区'},
                    {value: 'A-1-4', label: '汉阳区'},
                    {value: 'A-1-5', label: '武昌区'},
                    {value: 'A-1-6', label: '青山区'},
                    {value: 'A-1-7', label: '洪山区'},
                    {value: 'A-1-8', label: '东西湖区'},
                    {value: 'A-1-9', label: '汉南区'},
                    {value: 'A-1-10', label: '蔡甸区'},
                    {value: 'A-1-11', label: '江夏区'},
                    {value: 'A-1-12', label: '黄陂区'},
                ]
            },
            {value: 'A-2', label: '黄石'},
            {value: 'A-3', label: '十堰'},
            {value: 'A-4', label: '宜昌'},
            {value: 'A-5', label: '襄阳'},
        ]
    },{
        label: '北京',
        value: 'B',
        children: [
            {label: '东城区', value: 'B-0'},
            {label: '西城区', value: 'B-1'},
            {label: '朝阳区', value: 'B-2'},
            {label: '丰台区', value: 'B-3'},
            {label: '石景山区', value: 'B-4'},
            {label: '海淀区', value: 'B-5'},
            {label: '门头沟区', value: 'B-6'},
            {label: '房山区', value: 'B-7'},
            {label: '通州区', value: 'B-8'},
            {label: '顺义区', value: 'B-9'},
            {label: '昌平区', value: 'B-10'},
            {label: '大兴区', value: 'B-11'},
            {label: '怀柔区', value: 'B-12'},
            {label: '平谷区', value: 'B-13'},
            {label: '密云区', value: 'B-14'},
            {label: '延庆区', value: 'B-15'},
        ]
    }
];
let id = 0;
import CodeTpl from './md/cascader.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    num1: {
                        label: '点击',
                        widget: 'cascader',
                        enum: [...city],
                        ui: {
                            clearable: true,
                            placeholder: '请选择'
                        }
                    },
                    num2: {
                        label: 'Hover',
                        widget: 'cascader',
                        enum: [...city],
                        ui: {
                            props: { expandTrigger: 'hover' },
                            placeholder: '请选择'
                        }
                    },
                    num3: {
                        label: '禁用',
                        widget: 'cascader',
                        enum: city.map(v => {
                            let item = {...v};
                            if(item.label === '湖北') item.disabled = true;
                            return item
                        }),
                        ui: {
                            showAllLevels: false,
                            placeholder: '请选择'
                        }
                    },
                    num4: {
                        label: '多选',
                        widget: 'cascader',
                        enum: [...city],
                        ui: {
                            props: { multiple: true },
                            collapseTags: true,
                            placeholder: '请选择'
                        }
                    },
                    num5: {
                        label: '任意一级',
                        widget: 'cascader',
                        enum: [...city],
                        ui: {
                            props: { checkStrictly: true },
                            placeholder: '请选择'
                        }
                    },
                    num6: {
                        label: '任意多级',
                        widget: 'cascader',
                        enum: [...city],
                        ui: {
                            props: { multiple: true, checkStrictly: true },
                            collapseTags: true,
                            placeholder: '请选择'
                        }
                    },
                    num7: {
                        label: '动态加载',
                        widget: 'cascader',
                        ui: {
                            props: { 
                                multiple: true,
                                lazy: true,
                                lazyLoad (node, resolve) {
                                    const { level } = node;
                                    setTimeout(() => {
                                        const nodes = Array.from({ length: level + 1 })
                                        .map(item => ({
                                            value: ++id,
                                            label: `选项${id}`,
                                            leaf: level >= 2
                                        }));

                                        resolve(nodes);
                                    }, 1000);
                                }
                            },
                            collapseTags: true,
                            placeholder: '请选择'
                        }
                    },
                    num8: {
                        label: '异步',
                        widget: 'cascader',
                        asyncData: (resolve) => {
                            setTimeout(() => {
                                resolve([...city])
                            }, 2000)
                        },
                        props: {
                            visibleAsync: true
                        },
                        ui: {
                            placeholder: '请选择'
                        }
                    },
                    num9: {
                        label: '可搜索',
                        widget: 'cascader',
                        enum: [...city],
                        ui: {
                            filterable: true,
                            placeholder: '试试搜索: 恩施'
                        }
                    },
                    num10:{
                        label: '搜索多选',
                        widget: 'cascader',
                        enum: [...city],
                        ui: {
                            filterable: true,
                            props: { multiple: true },
                            placeholder: '试试搜索: 恩施'
                        }
                    }
                },
                grid: {
                    row: {
                        gutter: 20
                    },
                    col: {
                        span: 12
                    }
                }
            },
            formData: { }
        }
    },
}
</script>

<style>

</style>